<template>
  <div>
    <el-table :data="list" border>

      <el-table-column align="center" prop="xh" label="كۆرۈنۈش تەرتىپى" width="120px">
        <template slot-scope="{row}">
          <el-input size="small" v-model="row.xh" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="title" label="ماۋزۇ" width="250px">
        <template slot-scope="{row}">
          <el-input class="direction-rtl" size="small" v-model="row.title" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="thumb_url" label=" رەسىم" width="200px">
        <template slot-scope="{row}">
          <el-image fit="contain" v-if="row.thumb_url" :src="row.thumb_url" alt=""></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="thumb_url" label="رەسىم ئادىرىسى">
        <template slot-scope="{row}">
          <el-input v-model="row.thumb_url" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="prop" label="بەت ئادىرىسى">
        <template slot-scope="{row}">
          <el-input v-model="row.url" placeholder=""></el-input>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="type" label="ئادىرىس تىپى" width="140px">
        <template slot-scope="{row}">
          <el-select v-model="row.type" placeholder="">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="type" label="مەھشغۇلات" width="180px">
        <template slot-scope="{$index}">
          <el-button type="danger" size="small" @click="removeLine($index)">يۇيۇش</el-button>
          <el-button size="small" v-if="$index==list.length-1" @click="createNewLine" type="primary" icon="el-icon-circle-plus-outline"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="text-align:center;margin:24px 0">
      <el-button type="primary" @click="save">ساقلاش</el-button>
    </el-row>
  </div>
</template>

<script>
import { getAdConfig, setAdConfig } from '@/api/kino';
export default {
  name: 'Channel',
  components: {},
  data() {
    return {
      list: [],
      typeOptions: [
        { label: 'كىنو ئادىرىس', value: 1 },
        { label: 'باشقا تور ئادىرىسى', value: 2 },
      ],
    };
  },
  created() {
    console.log('created');
    getAdConfig({
      setting_name: 'channelList'
    }).then(res => {
      this.list = res || [];
    })
  },
  mounted() {

  },
  methods: {
    removeLine(index) {
      console.log(index);
      this.list.splice(index, 1)
    },
    createNewLine() {
      this.list.push({ type: 1 })
    },
    save() {
      console.log(this.list);
      for (let [index, item] of this.list.entries()) {
        if (!item.xh || !item.thumb_url || !item.title || !item.url) {
          this.$message.error(`${index + 1} -قۇرنى تۇللۇق كىرگۈزمەپسىز`);
          return
        } else {
          item.xh = Number(item.xh);
        }
      };
      this.list.sort((a, b) => a.xh - b.xh);
      setAdConfig({
        setting_name: 'channelList',
        list: this.list
      }).then(res => {
        console.log(res);
        this.$message.success('ساقلاندى');
      })
    }
  },
};
</script>

<style scoped lang="scss">
</style>
